<template>
  <div class="containerBox">
    <el-form :label-position="labelPosition" class="mainPage"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px">
      <!-- 联系人信息 -->
      <div class="contactsMsg">
        <p class="title">联系人信息</p>
        <el-form-item label="联系人" prop="contactPersonName">
          <el-input v-model="ruleForm.contactPersonName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactPersonPhone">
          <el-input v-model="ruleForm.contactPersonPhone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardNo">
          <el-input v-model="ruleForm.idCardNo"></el-input>
        </el-form-item>
        <!--  身份证照片  -->
        <div class="idCardPhoto photosBox">
          <!-- 正 -->
          <div class="idCardPhotoZheng photos">
            <div class="imgBox">
              <el-upload
                action="http://47.99.86.254:8080/api/common/uploadPicture?relatedType=COMMODITY"
                :show-file-list="false"
                :on-success="uploadSuccess1"
              >
                <img v-if="ruleForm.frontPhotoOfIdCard" :src="ruleForm.frontPhotoOfIdCard.url" alt="" class="positive">
                <span>点击修改图片</span>
              </el-upload>
            </div>
            <p>身份证正面</p>
          </div>
          <!-- 反 -->
          <div class="idCardPhotoZheng photos">
            <div class="imgBox">
              <el-upload
                action="http://47.99.86.254:8080/api/common/uploadPicture?relatedType=COMMODITY"
                :show-file-list="false"
                :on-success="uploadSuccess2"
              >
                <img v-if="ruleForm.backPhotoOfIdCard" :src="ruleForm.backPhotoOfIdCard.url" alt="" class="positive">
                <span>点击修改图片</span>
              </el-upload>
            </div>
            <p>身份证反面</p>
          </div>
          <!-- 手持 -->
          <div class="idCardPhotoZheng photos">
            <div class="imgBox">
              <el-upload
                action="http://47.99.86.254:8080/api/common/uploadPicture?relatedType=COMMODITY"
                :show-file-list="false"
                :on-success="uploadSuccess3"
              >
                <img v-if="ruleForm.holdPhotoOfIdCard" :src="ruleForm.holdPhotoOfIdCard.url" alt="" class="positive">
                <span>点击修改图片</span>
              </el-upload>
            </div>
            <p>手持身份证</p>
          </div>
        </div>
      </div>
      <!-- 商家信息 -->
      <div class="shopMsg">
        <p class="title">商家信息</p>
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <div class="tag-list">
            <div class="tag-item" v-for="(item, index) in tagList" :key="index">
              <span>{{item.firstCategoryName}} > {{item.secondCategoryName}}</span>
              <!--<span>{{index}}</span>-->
              <a class="remove-tag-btn" @click="deleteCommodityType(index)">-</a>
            </div>
            <el-button @click="showModal">添加类型</el-button>
          </div>
        </el-form-item>
        <el-form-item label="对公账号" prop="publicBankCardNo">
          <el-input v-model="ruleForm.publicBankCardNo"></el-input>
        </el-form-item>
        <el-form-item label="支付宝账号" prop="alipayNo">
          <el-input v-model="ruleForm.alipayNo"></el-input>
        </el-form-item>
        <!--  营业执照  -->
        <div class="idCardPhoto photosBox">
          <!-- 营业执照 -->
          <div class="idCardPhotoZheng photos">
            <div class="imgBox">
              <el-upload
                action="http://47.99.86.254:8080/api/common/uploadPicture?relatedType=COMMODITY"
                :show-file-list="false"
                :on-success="uploadSuccess4"
              >
                <img v-if="ruleForm.photoOfBusinessLicence" :src="ruleForm.photoOfBusinessLicence.url" alt="" class="positive">
                <span>点击修改图片</span>
              </el-upload>
            </div>
            <p>营业执照</p>
          </div>
          <!-- logo -->
          <div class="idCardPhotoZheng photos">
            <div class="imgBox">
              <el-upload
                action="http://47.99.86.254:8080/api/common/uploadPicture?relatedType=COMMODITY"
                :show-file-list="false"
                :on-success="uploadSuccess5"
              >
                <img v-if="ruleForm.photoOfOnlineShopLogo" :src="ruleForm.photoOfOnlineShopLogo.url" alt="" class="positive">
                <span>点击修改图片</span>
              </el-upload>
            </div>
            <p>logo</p>
          </div>
        </div>
      </div>
      <!-- 操作 -->
      <div class="operation">
        <a class="subBut" @click="dataFormSubmit">确定提交审核</a>
        <a href="javascript:history.back(-1)">返回</a>
      </div>
    </el-form>
    <!--  添加类型弹窗  -->
    <el-dialog title="添加类型"  :visible.sync="isShowModal" :close-on-click-modal="false">
      <el-form ref="form" label-width="80px" :label-position="labelPosition">
        <el-form-item label="标签组">
          <el-select v-model="tagGroupId" @change="getShowTagList" placeholder="请选择一级分类">
            <el-option v-for="(item, index) in tagGroupList" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签内容">
          <el-select v-model="subTagId" placeholder="请选择二级分类">
            <el-option v-for="(item, index) in subTagList" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="addClothingCityTagRel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'edit',
  data () {
    return {
      labelPosition: 'right',
      listLoading: true,
      oldInfo: '',
      // 商品类型
      tagList: [],
      isShowModal: false,
      subTagId: null,
      subTagList: [],
      tagGroupId: null,
      tagGroupList: [],
      ruleForm: {},
      rules: {
        contactPersonName: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        contactPersonPhone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' }
        ],
        idCardNo: [
          { required: true, message: '请填写身份证号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写品牌名称', trigger: 'blur' }
        ],
        publicBankCardNo: [
          { required: true, message: '请填写对公账号', trigger: 'blur' }
        ],
        alipayNo: [
          { required: true, message: '请填写支付宝帐号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    uploadSuccess1 (res) {
      if (res) {
        this.ruleForm.frontPhotoOfIdCard = res.data
        console.log(this.ruleForm.frontPhotoOfIdCard.id)
      }
    },
    uploadSuccess2 (res) {
      if (res) {
        this.ruleForm.backPhotoOfIdCard = res.data
        console.log(this.ruleForm.backPhotoOfIdCard.id)
      }
    },
    uploadSuccess3 (res) {
      if (res) {
        this.ruleForm.holdPhotoOfIdCard = res.data
        console.log(this.ruleForm.holdPhotoOfIdCard.id)
      }
    },
    uploadSuccess4 (res) {
      if (res) {
        this.ruleForm.photoOfBusinessLicence = res.data
        console.log(this.ruleForm.photoOfBusinessLicence.id)
      }
    },
    uploadSuccess5 (res) {
      if (res) {
        this.ruleForm.photoOfOnlineShopLogo = res.data
        console.log(this.ruleForm.photoOfOnlineShopLogo.id)
      }
    },
    showModal () {
      this.isShowModal = true
    },
    // 删除商品类型
    deleteCommodityType (index) {
      console.log(index)
    },
    // 返回
    back () {
      this.$router.back(-1)
      // this.$router.push({ path: 'system/welcome/huanYinYe' })
    },
    dataFormSubmit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          console.log('-------------------')
          console.log(this.ruleForm)
        }
      })
    },
    getShowTagList () {
      console.log(1)
    },
    addClothingCityTagRel () {
      console.log(2)
    }
  }
}
</script>

<style scoped>
  .mainPage{
    min-width:1300px;
    padding:20px 40px;
  }
  p.title{
    line-height: 50px;
    margin-bottom: 10px;
    font-size:16px;
  }
  .contactsMsg > .el-form-item .el-input, .shopMsg > .el-form-item .el-input{
    width:200px;
  }
  .contactsMsg > .el-form-item .el-form-item__label{
    width:200px;
  }
  .imgBox{
    position: relative;
  }
  .el-upload span{
    position: absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    display: block;
    top:0;
    left:0;
    line-height:220px;
    color:#fff;
    letter-spacing: 4px;
  }
  .photosBox{
    text-align:center;
    padding:20px 0;
    margin:0 50px 50px;
    border-bottom: 2px solid #e5e5e5;

  }
  .idCardPhoto .photos{
    width:270px;
    display:inline-block;
  }
  .idCardPhoto .photos:nth-child(2){
    margin:0 60px;
  }
  .idCardPhoto .photos .imgBox{
    width:100%;
    height:170px;
    text-align:center;
    background: #e5e5e5;
  }
  .idCardPhoto .photos .imgBox img{
    max-width:270px;
    max-height:170px;
  }
  .idCardPhoto .photos p{
    line-height:50px;
  }
  /*标签*/
  /*.tag-list{*/
  /*margin: 60px 20px;*/
  /*}*/
  .tag-list .tag-item{
    display: inline-block;
    margin-right: 14px;
    margin-bottom:10px;
    padding:0 10px;
    border: 1px solid #ddd;
    background-color: #eee;
    position: relative;
  }
  .tag-list .tag-item .remove-tag-btn {
    position: absolute;
    top: -5px;
    right: -8px;
    display: block;
    border-radius: 100%;
    border: 1px solid #ccc;
    background-color: #f55470;
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 10px;
    font-size: 30px;
    color: #fff;
  }
  /*操作*/
  .operation{
    padding-bottom: 50px;
  }
  .operation a{
    width:120px;
    line-height:30px;
    text-align: center;
    border:1px solid #dcdcdc;
    border-radius:5px;
    display: inline-block;
    color:#000;
    background:none;
  }
  .operation a.subBut{
    margin:0 50px 0 150px;
  }
</style>
